<template>
    <div id="reactive">
    </div>
</template>
<script>
import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0,
})
/**
 * watchEffect的执行函数中，使用了哪个变量，就监听哪个变量。这里使用了state.count,当 state.count变化时，
 * document.body.innerHTML 就会被重新赋值，从而实现视图实时更新；
 */
watchEffect(() => {
  document.body.innerHTML = `count is ${state.count}`
})
function increment() {
  state.count++
}

document.body.addEventListener('click', increment)
</script>